<template>
  <div class="funnel-chart">
    <div v-show="isData" id="echart3" class="account-display-echart" ref="funnelChart"></div>
    <div v-show="!isData" class="basic-line-chart-title-no-data">暂无数据</div>
  </div>
</template>

<script>

  export default {
    name: 'FunnelChart',
    data () {
      return {
        initEchart: '',
        list: [],
        isData: true,
        option: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}'
            // formatter: '{b} : {d}%'
          },

          series: [
            {
              name: '漏斗图',
              type: 'funnel',
              width: '40%',
              height: '100%',
              left: '30%',
              top: '5%',
              data: []
            }
          ]
        }

      }
    },
    methods: {
      init (res) {
        if (Object.keys(res.converDTO).length > 0) {
          this.formatData(res.converDTO)
          this.initEchart = 'init'
          this.isData = true
        } else {
          this.isData = false
        }
        const myChart = window.echarts.init(this.$refs.funnelChart, 'walden')
        myChart.setOption(this.option)
      },
      formatData (data) {
        if (this.initEchart) {
          this.option.series.forEach(item => {
            if (item.data.length > 0) {
              item.data = []
            }
          })
        }
        this.option.series[0].data.push({ value: data.scanCount, name: '总扫码关注' })
        this.option.series[0].data.push({ value: data.joinCount, name: '总参与粉丝' })
        this.option.series[0].data.push({ value: data.shareCount, name: '总分享' })
        this.option.series[0].data.push({ value: data.finishCount, name: '总完成' })
        // this.option.series[0].data.push({ value: data.redeemCount, name: '总领奖' })
      }
    }
  }
</script>

<style lang="less">
  .funnel-chart {
    padding: 0 20px;
    height: 340px;
    min-width: 600px;
    background: white;

    .basic-line-chart-title-no-data {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #909399;
    }

    .account-display-echart {
      width: 600px;
      min-height: 250px;
    }
  }
</style>
